<!--
 * @Author: 冯尚新 fengshangxin@yunjinhz.com
 * @Date: 2023-05-23 10:51:58
 * @LastEditors: 冯尚新 fengshangxin@yunjinhz.com
 * @LastEditTime: 2023-05-30 20:49:49
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\store\inventoryManage\inventoryList.vue
 * @Description: 盘库管理列表
-->

<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :isWhite="true" backText="返回" :title="navTitle">
			<view class="nav-right-icon">
				<u-icon color="#027aff" name="list" size="38" @click="isOpen=true"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="">
			<!-- 列表内容 -->
			<view class="u-page content">
				<me-table :i="0" :index="0" :load-data="onloadData" :init-load="false" ref="mescrollItem0">
					<view slot-scope="d" class="list-item-root">
						<u-swipe-action :show="d.data.show" :index="d.data.id" :options="d.data.options" btn-width="260" @click="conTabsRemove" @open="swiperOpen">
							<view class="invent-content" @click="goToInitiate(d.data)">
								<view class="invent-right">
									<view class="r-content">
										<text class="lt-right-title-label">
											{{ d.data.checkName }}
										</text>
										<text class="lt-right-title-value">
											<!-- {{ d.data. qty || 0 }} -->
											<u-tag style="flex-shrink: 0;" :spStyle="getSpStyle(d.data)" mode="dark" shape="circle" :text="d.data.statusName"></u-tag>
										</text>
									</view>
									<view class="normal-title title-sty">
										<text>
											{{ d.data.creator }}
										</text>
									</view>
									<view class="peo-sty">
										<view>
											<span class="label-sty">参与者</span>
											<span>{{ d.data.checker }}</span>
										</view>
										<view>
											<text class="label-sty">
												物品数量
											</text>
											<text class="value-sty">
												{{ d.data. qty || 0 }}
											</text>
										</view>
									</view>
									<view class="content-sty">
										<view>
											<text>{{ d.data.checkTimeStart || '/' }} 至 {{ d.data.checkTimeEnd || '/' }}</text>
										</view>
										<view class="pad-top">
											<text>备注：</text>
											<text class="remark">
												{{ d.data.remark }}
											</text>
										</view>
									</view>
								</view>
							</view>
						</u-swipe-action>
					</view>
				</me-table>
			</view>
		</view>
		<!-- 查询条件 -->
		<u-popup mode="right" height="100%" width="80%" v-model="showMore">
			<view class="cearch_title">
				查询条件
			</view>
			<view class="title-content">
				<u-form :model="queryForm" label-position="top" class="u-m-t-20" ref="uForm">
					<u-form-item label="所属仓库" :label-width="labelWidth" right-icon="arrow-right" ref="townChangeRef">
						<u-input :disabled="true" :custom-style="pointerStyle" placeholder="请选择所属仓库" v-model="queryForm.storeName" @click="storageShow = true" />
					</u-form-item>
					<u-form-item label="盘库名称" :label-width="labelWidth">
						<u-input placeholder="请输入盘库名称" v-model="queryForm.checkNameLike" />
					</u-form-item>
					<u-form-item label="盘库时间" :label-width="labelWidth" right-icon="arrow-right">
						<u-input :disabled="true" :custom-style="pointerStyle" placeholder="请选择日期" v-model="queryForm.createTime" @click="clicDatekHandle('dateRange')" />
					</u-form-item>
					<u-form-item label="盘库状态" :label-width="labelWidth">
						<u-input :disabled="true" :custom-style="pointerStyle" placeholder="请选择盘库状态" v-model="queryForm.statusName" @click="statusShow = true" />
					</u-form-item>
					<u-form-item label="备注" :label-width="labelWidth">
						<u-input placeholder="请输入备注" v-model="queryForm.remarkLike" />
					</u-form-item>
				</u-form>
				<view class="submit-btns btn-other-cls" style="margin-left:-30rpx">
					<u-button plain class="del" type="primary" @click="resetForm">
						重置
					</u-button>
					<u-button class="mit" type="primary" @click="confirmBack">
						确定
					</u-button>
				</view>
			</view>
		</u-popup>
		<u-action-sheet :list="addBtnsList" v-model="isOpen" @click="handlerDropMenu"></u-action-sheet>
		<!-- 所属仓库 -->
		<u-select :list="newStreetData" mode="single-column" v-model="storageShow" @confirm="selectConfirm('storeId','storeName',$event)"></u-select>
		<!-- 盘库时间 -->
		<u-calendar mode="range" max-date="2099-12-31" v-model="dateRange" @change="handlerSearchDate"></u-calendar>
		<!-- 盘库状态 -->
		<u-select :list="statusList" mode="single-column" v-model="statusShow" @confirm="selectConfirm('status','statusName',$event)"></u-select>
	</view>
</template>

<script>
	import meTable from '@/components/me-table.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import storeService from '@/service/store/store.service.js';
	import {
		C_STORE_CHECK_STATUS,
	} from "@/service/store/mapping/enum.js"
	const sysCodeColors = {
		"03": {
			color: "#01A79A",
			borderColor: "#01A79A",
			backgroundColor: "#C0ECE2",
		},
		"04": {
			color: "#AC0000",
			borderColor: "#AC0000",
			backgroundColor: "#F2CCCC",
		},
		"01": {
			color: "#0079F2",
			borderColor: "#0079F2",
			backgroundColor: "#E0ECFF",
		},
		"02": {
			color: "#EC7C37",
			borderColor: "#EC7C37",
			backgroundColor: "#FBE2D3",
		},
	};
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			meTable,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				showMore: false,
				anaylisysList: [],
				preParams: {},
				searchForm: {},
				isOpen: false,
				storageList: [],
				addBtnsList: [{
						text: "查询",
						color: "#007aff",
					},
					// {
					//   text: "发起盘库",
					//   color: "#007aff",
					// },
				],
				options: [{
						text: '附件管理',
						style: {
							backgroundColor: '#007aff',
						},
					},
					{
						text: '作废',
						style: {
							backgroundColor: '#dd524d',
						},
					},
				],
				sigleOptions: [{
					text: '附件管理',
					style: {
						backgroundColor: '#007aff',
					},
				}, ],
				storageShow: false,
				statusShow: false,
				createTime: '',
				statusList: [{
					label: '全部',
					value: '',
				}, {
					label: '待盘',
					value: '01',
				}, {
					label: '盘库中',
					value: '02',
				}, {
					label: '完成',
					value: '03',
				}, {
					label: '作废',
					value: '04',
				}, ],
				mode: 'date',
				maxDate: '2099-12-31',
				labelPosition: 'top',
				dateRange: false,
				errorType: ['border-bottom', 'message', ],
				labelWidth: '180',
				queryForm: {},
				newStreetData: [], // 查询条件中所属仓库
				fContent: [{
					iconPath: require('@/static/omore.png'),
					selectedIconPath: require('@/static/omore.png'),
					text: '更多',
					active: false,
				}],
				// h5端部分浏览器input设置disabled后点击事件失效 2023-10-27 fsx start
				pointerStyle: {
				  marginRight: "5px",
					pointerEvents: "none !important"
				},
				// h5端部分浏览器input设置disabled后点击事件失效 2023-10-27 fsx end
			};
		},
		watch: {
			storageList(newValue) {
				let self = this;
				newValue.filter(item => {
					self.$set(item, 'show', false);
					return true;
				});
			},
		},
		onLoad() {
			this.preParams = this.getRouteParam();
		},
		mounted() {
			this.setRightBtns();
			this.getStorageList();
		},
		methods: {
			getStorageList() {
				let parms = {
					paras: {
						psr: "",
						storeId: "",
						type: 1,
					},
				}
				storeService.getStoreLst(parms).then(res => {
					res.data.forEach(item => {
						this.newStreetData.push({
							label: item.storeName,
							value: item.storeId,
						})
					})
				});
			},
			getSpStyle(it) {
				if (it.status == C_STORE_CHECK_STATUS.STAY) {
					return sysCodeColors[it.status] || {};
				} else if (it.status == C_STORE_CHECK_STATUS.COMPLETE) {
					return sysCodeColors[it.status] || {};
				} else if (it.status == C_STORE_CHECK_STATUS.INVALID) {
					return sysCodeColors[it.status] || {};
				} else if (it.status == C_STORE_CHECK_STATUS.IN_LIBRARY) {
					return sysCodeColors[it.status] || {};
				}
			},
			selectConfirm(code, name, e) {
				this.queryForm[code] = '';
				this.queryForm[name] = '';
				e.map((val, index) => {
					this.queryForm[code] = val.value;
					this.queryForm[name] = val.label;
				});
			},
			// 日期文本点击事件
			clicDatekHandle(type) {
				this[type] = true;
			},
			handlerSearchDate(e) {
				this.queryForm.createTime = e.startDate + '~' + e.endDate;
				this.queryForm['createTimeBegin'] = e.startDate;
				this.queryForm['checkTimeStartBegin'] = e.startDate;
				this.queryForm['createTimeEnd'] = e.endDate;
				this.queryForm['checkTimeEndEnd'] = e.endDate;
			},
			resetForm() {
				this.queryForm = {};
			},
			// 设置右侧标题
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("更多", () => {
					this.isOpen = true;
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.isOpen = true;
				}
			},
			// 点击确定
			confirmBack() {
				this.showMore = false;
				this.searchForm = {
					...this.queryForm,
				};
				this.$refs['mescrollItem0'].refresh();
			},
			// 导航栏菜单
			handlerDropMenu(i) {
				this.isOpen = false;
				if (i == 0) {
					this.showMore = true;
					this.searchForm = this.queryForm;
				} else {
					this.$u.route("/pages/store/components/reviewStore");
				}
			},
			onloadData(page) {
				let parmas = {
					page: page.num,
					limit: page.size,
					paras: {
						storeId: this.searchForm.storeId,
						checkNameLike: this.searchForm.checkNameLike,
						checkTimeEndEnd: this.searchForm.checkTimeEndEnd,
						checkTimeStartBegin: this.searchForm.checkTimeStartBegin,
						createTimeBegin: this.searchForm.createTimeBegin,
						createTimeEnd: this.searchForm.createTimeEnd,
						remarkLike: this.searchForm.remarkLike,
						status: this.searchForm.status,
					},
				}
				return new Promise((resolve) => {
					storeService
						.getStoreInventoryList(parmas)
						.then((res) => {
							if (!res.success) {
								this.$u.toast('查询失败');
								resolve({
									count: 0,
									data: [],
								});
								return;
							}
							res.data && res.data.map(item => {
								item['show'] = false;
								if (item.status == C_STORE_CHECK_STATUS.STAY || item.status == C_STORE_CHECK_STATUS.IN_LIBRARY) { // 待盘或盘库中可以作废
									item['options'] = this.options;
								} else {
									item['options'] = this.sigleOptions;
								}
							});
							this.storageList = res.data;
							resolve({
								count: res.count,
								data: res.data,
							});
						}).catch(e => {
							this.$u.toast('查询失败');
							resolve({
								count: 0,
								data: [],
							});
						});
				});
			},
			refreshSwiperInv() {
				let self = this;
				this.storageList = this.storageList.filter(item => {
					self.$set(item, 'show', false);
					return true;
				});
			},
			handleCancel() {
				this.showPlus = false;
				this.refreshSwiperInv();
			},
			// 确认盘库返回操作
			updateBackState() {
				this.$refs['mescrollItem0'].refresh();
				this.refreshSwiperInv();
			},
			// 开始盘库
			goToInitiate(prms) {
				if (prms.status == C_STORE_CHECK_STATUS.STAY) { // 如果是待盘状态提示
					this.$modal.alert('请确认是否需要开始盘库,开始盘库后此仓库将被锁定直到完成盘库或者作废此盘库记录!', '提示', () => {
						storeService.saveStoreCheck({
							id: prms.id,
							optType: "start",
						}).then(res => {
							if (res.success) {
								this.setRouteParam(prms);
								this.$u.route('pages/store/inventoryManage/initiateInventoty');
							} else {
								this.$u.toast(res.msg);
							}
						}).catch(err => {
							this.$u.toast(err);
						});
					}, '', true);
				} else {
					this.setRouteParam(prms);
					this.$u.route('pages/store/inventoryManage/initiateInventoty');
				}
			},
			conTabsRemove(index1, index) {
				let datas = this.$refs.mescrollItem0.listDatas;
				let cur = -1;
				for (let i = 0; i < datas.length; i++) {
					if (datas[i].id == index1) {
						cur = i;
						break;
					}
				}
				if (cur == -1) {
					this.$u.toast("选中数据无效");
					return;
				}
				// let prms = this.storageList[index];
				let params = datas[cur];
				if (index == 1) { // 作废
					this.$modal.alert('确定是否要作废!', '提示', () => {
						storeService.saveStoreCheck({
							id: params.id,
							optType: "del",
						}).then(res => {
							if (res.success) {
								this.$u.toast(res.msg);
								this.$refs['mescrollItem0'].refresh();
							} else {
								this.$u.toast(res.msg);
							}
						})
					}, '', true);
				} else { // 上传附件
					this.setRouteParam({
						fileId: datas[cur].fileId,
						id: datas[cur].id,
					});
					this.$u.route('pages/store/components/uploadImage');
				}
				this.$refs.mescrollItem0.listDatas.map((val, idx) => {
					this.$refs.mescrollItem0.listDatas[idx].show = index == val.id;
				});
			},
			//
			swiperOpen(index) {
				this.$refs.mescrollItem0.listDatas.map((val, idx) => {
					this.$refs.mescrollItem0.listDatas[idx].show = index == val.id;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "./inven_common.scss";

	.page {
		padding: 0;
	}

	.content {
		background-color: #F3F4F5;
		min-height: 100%;
	}

	.list-item-root {
		margin: 10px;
		border-radius: 15px;
		overflow: hidden;
	}

	.invent-content {
		padding: 24rpx;
	}

	.lt-right-title-value {
		// margin-left: 16rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: $u-type-warning-dark;
	}

	.lt-right-title-label {
		font-size: 30rpx;
		font-weight: 600;
		color: $u-main-color;
	}

	.key-search-lay {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		z-index: 999;
		width: 100%;

		.key-search {
			padding: 0 10px;
		}
	}

	.nav-right-icon {
		margin-right: 30rpx;
		font-size: .8rem;
		color: $u-type-primary;
	}

	.title-sty {
		padding-bottom: 22rpx;
		border-bottom: 1px solid #ebebec
	}

	.peo-sty {
		display: flex;
		justify-content: space-between;
		padding-top: 24rpx;
		font-size: 26rpx;
	}

	.label-sty {
		color: #82848a;
		padding-right: 20rpx;
	}

	.value-sty {
		color: #ee8c4f;
	}

	.content-sty {
		color: #82848a;
		background-color: #fafafa;
		padding: 20rpx 10rpx;
		margin-top: 24rpx;
		font-size: 24rpx;
	}

	.pad-top {
		padding-top: 14rpx;
	}

	.cearch_title {
		background-color: #F3F4F5;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-weight: 600;
		padding: 22rpx 0 21rpx 32rpx;
		z-index: 999;
		position: fixed;
	}

	.title-content {
		width: 90%;
		margin: auto;
		padding-top: 76rpx;

		.query-btn {
			position: fixed;
			width: 95%;
			bottom: var(--window-bottom, 0);
		}
	}

	.remark {
		word-break: break-all;
	}
</style>
